<!DOCTYPE html>
<html lang="en">

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Favicon icon-->

    <!-- Libs CSS -->
    <link href="{{ url_for('static', filename='css/bootstrap-icons.css') }}" rel="stylesheet">
    <link href="{{ url_for('static', filename='css/dropzone.css') }}" rel="stylesheet">
    <link href="{{ url_for('static', filename='css/materialdesignicons.min.css') }}" rel="stylesheet">
    <link href="{{ url_for('static', filename='css/prism-okaidia.css') }}" rel="stylesheet">
    <!-- Theme CSS -->
    <link rel="stylesheet" href="{{ url_for('static', filename='css/theme.min.css') }}">
    <title>Discussion Area | Dash Ui - Bootstrap 5 Admin Dashboard Template</title>
</head>

<body class="bg-light">
    <div id="db-wrapper">
        <!-- navbar vertical -->
        <!-- Sidebar -->
        <nav class="navbar-vertical navbar">
            <div class="nav-scroller">
                <!-- Brand logo -->
                <a class="navbar-brand" href="">
                    <img src="{{ url_for('static', filename='image/logo.png') }}" alt="Logo">
                </a>
                <!-- Navbar nav -->
                <ul class="navbar-nav flex-column" id="sideNavbar">
                    <li class="nav-item">
                        <a class="nav-link has-arrow active" href="{{ url_for('teacher.get_teacher') }}">
                            <i data-feather="home" class="nav-icon icon-xs me-2"></i> Dashboard
                        </a>
                    </li>
                    <!-- Nav item -->
                    <li class="nav-item">
                        <div class="navbar-heading">Layouts & Pages</div>
                    </li>
                    <!-- Nav item -->
                    <li class="nav-item">
                        <a class="nav-link has-arrow collapsed" href="#!" data-bs-toggle="collapse"
                            data-bs-target="#navPages" aria-expanded="false" aria-controls="navPages">
                            <i data-feather="layers" class="nav-icon icon-xs me-2"></i> Pages
                        </a>
                        <div id="navPages" class="collapse" data-bs-parent="#sideNavbar">
                            <ul class="nav flex-column">
                                <li class="nav-item">
                                    <a class="nav-link" href="{{url_for('CourseManagement.get_CourseManagement')}}">
                                        Course Management</a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link" href="{{url_for('Discussion.get_discussion')}}">
                                        Discussion</a>
                                </li>
                            </ul>
                        </div>
                    </li>
                </ul>
            </div>
        </nav>
        <!-- Page content -->
        <div id="page-content">
            <div class="header @@classList">
                <!-- navbar -->
                <nav class="navbar-classic navbar navbar-expand-lg">
                    <a id="nav-toggle" href="#"><i data-feather="menu" class="nav-icon me-2 icon-xs"></i></a>
                    <!--Navbar nav -->
                    <ul class="navbar-nav navbar-right-wrap ms-auto d-flex nav-top-wrap">
                        <li class="dropdown stopevent">
                            <a class="btn btn-light btn-icon rounded-circle indicator indicator-primary text-muted"
                                href="#" role="button" id="dropdownNotification" data-bs-toggle="dropdown"
                                aria-haspopup="true" aria-expanded="false">
                                <i class="icon-xs" data-feather="bell"></i>
                            </a>
                            <div class="dropdown-menu dropdown-menu-lg dropdown-menu-end"
                                aria-labelledby="dropdownNotification">
                                <div>
                                    <div class="border-bottom px-3 pt-2 pb-3 d-flex justify-content-between align-items-center">
                                        <p class="mb-0 text-dark fw-medium fs-4">Notifications</p>
                                        <a href="#" class="text-muted">
                                            <span><i class="me-1 icon-xxs" data-feather="settings"></i></span>
                                        </a>
                                    </div>
                                    <!-- List group -->
                                    <ul class="list-group list-group-flush notification-list-scroll">
                                        <!-- List group item -->
                                        <li class="list-group-item bg-light">
                                            <a href="#" class="text-muted">
                                                <h5 class=" mb-1">Rishi Chopra</h5>
                                                <p class="mb-0">Mauris blandit erat id nunc blandit, ac eleifend dolor pretium.</p>
                                            </a>
                                        </li>
                                        <!-- List group item -->
                                        <li class="list-group-item">
                                            <a href="#" class="text-muted">
                                                <h5 class=" mb-1">Neha Kannned</h5>
                                                <p class="mb-0">Proin at elit vel est condimentum elementum id in ante. Maecenas et sapien metus.</p>
                                            </a>
                                        </li>
                                        <!-- List group item -->
                                        <li class="list-group-item">
                                            <a href="#" class="text-muted">
                                                <h5 class=" mb-1">Nirmala Chauhan</h5>
                                                <p class="mb-0">Morbi maximus urna lobortis elit sollicitudin sollicitudieget elit vel pretium.</p>
                                            </a>
                                        </li>
                                        <!-- List group item -->
                                        <li class="list-group-item">
                                            <a href="#" class="text-muted">
                                                <h5 class=" mb-1">Sina Ray</h5>
                                                <p class="mb-0">Sed aliquam augue sit amet mauris volutpat hendrerit sed nunc eu diam.</p>
                                            </a>
                                        </li>
                                    </ul>
                                    <div class="border-top px-3 py-2 text-center">
                                        <a href="#" class="text-inherit fw-semi-bold">View all Notifications</a>
                                    </div>
                                </div>
                            </div>
                        </li>
                        <!-- List -->
                        <li class="dropdown ms-2">
                            <a class="rounded-circle" href="#" role="button" id="dropdownUser" data-bs-toggle="dropdown"
                                aria-haspopup="true" aria-expanded="false">
                                <div class="avatar avatar-md avatar-indicators avatar-online">
                                    <img alt="avatar" src="{{ url_for('static', filename='picture/avatar-1.jpg') }}"
                                        class="rounded-circle">
                                </div>
                            </a>
                            <div class="dropdown-menu dropdown-menu-end" aria-labelledby="dropdownUser">
                                <div class="px-4 pb-0 pt-2">
                                    <div class="lh-1 ">
                                        <h5 class="mb-1">{{ name }}</h5>
                                    </div>
                                    <div class=" dropdown-divider mt-3 mb-2"></div>
                                </div>
                                <ul class="list-unstyled">
                                    <li>
                                        <a class="dropdown-item" href="#">
                                            <i class="me-2 icon-xxs dropdown-item-icon" data-feather="settings"></i>Account Settings
                                        </a>
                                    </li>
                                    <li>
                                        <a class="dropdown-item" href="{{ url_for('user.logout') }}">
                                            <i class="me-2 icon-xxs dropdown-item-icon" data-feather="power"></i>Sign Out
                                        </a>
                                    </li>
                                </ul>
                            </div>
                        </li>
                    </ul>
                </nav>
            </div>
            <!-- Container fluid -->
            <div class="container-fluid p-6">
                <div class="row">
                    <div class="col-lg-12 col-md-12 col-12">
                        <!-- Page header -->
                        <div class="border-bottom pb-4 mb-4">
                            <h3 class="mb-0 fw-bold">Discussion Area</h3>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-xl-12 col-lg-12 col-md-12 col-12">
                        <!-- card -->
                        <div class="card">
                            <!-- card body -->
                                <!-- Comment list -->
                                <div class="comments">
                                    <div class="card mb-3">
                                        <div class="card-body">
                                            <h6 class="card-subtitle mb-2 text-muted">User Name</h6>
                                            <p class="card-text">This is an example comment.</p>
                                            <button class="btn btn-sm btn-link reply-btn">Reply</button>
                                            <div class="reply-section" style="display: none;">
                                                <textarea class="form-control mt-2" rows="2" placeholder="Write your reply..."></textarea>
                                                <button class="btn btn-sm btn-primary mt-2">Submit Reply</button>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="card mb-3">
                                        <div class="card-body">
                                            <h6 class="card-subtitle mb-2 text-muted">Another User</h6>
                                            <p class="card-text">Another example comment here.</p>
                                            <button class="btn btn-sm btn-link reply-btn">Reply</button>
                                            <div class="reply-section" style="display: none;">
                                                <textarea class="form-control mt-2" rows="2" placeholder="Write your reply..."></textarea>
                                                <button class="btn btn-sm btn-primary mt-2">Submit Reply</button>
                                            </div>
                                        </div>
                                    </div>
                                    <!-- More comments can be added here -->
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Scripts -->
        <!-- Libs JS -->
        <script src="{{ url_for('static', filename='js/jquery.min.js') }}"></script>
        <script src="{{ url_for('static', filename='js/bootstrap.bundle.min.js') }}"></script>
        <script src="{{ url_for('static', filename='js/jquery.slimscroll.min.js') }}"></script>
        <script src="{{ url_for('static', filename='js/feather.min.js') }}"></script>
        <script src="{{ url_for('static', filename='js/prism.js') }}"></script>
        <script src="{{ url_for('static', filename='js/apexcharts.min.js') }}"></script>
        <script src="{{ url_for('static', filename='js/dropzone.min.js') }}"></script>
        <script src="{{ url_for('static', filename='js/prism-toolbar.min.js') }}"></script>
        <script src="{{ url_for('static', filename='js/prism-copy-to-clipboard.min.js') }}"></script>
        <!-- Theme JS -->
        <script src="{{ url_for('static', filename='js/theme.min.js') }}"></script>
        <script>
            $(document).ready(function () {
                $('.reply-btn').on('click', function () {
                    $(this).siblings('.reply-section').toggle();
                });
            });
        </script>
    </div>
</body>

</html>
